/*
    Document   : Social login
    Created on : Apr 22, 2013, 4:44:14 PM
    Author     : fire1
    Description:
        This are is scalable login buttons.
*/

a.social-button {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: inline-block;
    text-align: left;
    padding: 1% 0% 0% 0.35%;
    width: 27%;
    height:auto;
    margin: 2%;
    text-decoration: none;
    color: rgba(255,255,255,0.75);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: capitalize;
    line-height: 19px;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 3px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: rgba(255,255,255,0.35);
    border-right-color: rgba(0,0,0,0.15);
    border-bottom-color: rgba(0,0,0,0.45);
    border-left-color: rgba(255,255,255,0.15);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow:0 0px 3px rgba(0,0,0,0.5);
}
a.social-button .social-title{
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.4s ease-in-out;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    width: 50%;
    margin-top:2%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.4em;
    display:inline-block;
    clear:left;
}
a.social-button:hover .social-title{
    text-shadow:0 1px 0px rgba(0,0,0,0.8);
}
a.social-button:hover{
    color:#fff;
    border-top-color: rgba(255,255,255,0.35);
    border-right-color: rgba(0,0,0,0.25);
    border-bottom-color: rgba(0,0,0,0.55);
    border-left-color: rgba(255,255,255,0.25);
    box-shadow:0 1px 12px rgba(0,0,0,0.8);

}
a.social-button span.label{
    color:rgba(255,255,255,0.7);
    margin-right:5%;
    margin-left:2%;
    font-size:9px;
    font-family:Verdana, Geneva, sans-serif;
    display:block;
    font-weight:lighter;
    float:left;
    text-shadow: 0 1px 0 rgba(0,0,0,0.6);

}
a.social-button img.icon{
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width: 36%;
    height: auto;
    padding-right:4%;
    display: inline-block;
    float: left;
    clear: both;
    margin-left:-1.32%;
    margin-right:4%;
    margin-top:-4%;
    margin-bottom: 0%;
    opacity:0.3;
    border:none;
    border-right:solid 1px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.15);
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
a.social-button:hover img.icon{
    opacity:1;
    background: rgba(255,255,255,0.15);
}
a.social-button.facebook{
    background: #3b5998;

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url();
background: -moz-linear-gradient(top,  rgba(73,97,155,1) 0%, rgba(27,55,99,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,97,155,1)), color-stop(100%,rgba(27,55,99,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(73,97,155,1) 0%,rgba(27,55,99,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(73,97,155,1) 0%,rgba(27,55,99,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(73,97,155,1) 0%,rgba(27,55,99,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(73,97,155,1) 0%,rgba(27,55,99,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49619b', endColorstr='#1b3763',GradientType=0 ); /* IE6-8 */



}
a.social-button.twitter{
background: rgb(145,223,255); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url();
background: -moz-linear-gradient(top,  rgba(145,223,255,1) 1%, rgba(0,132,173,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(145,223,255,1)), color-stop(100%,rgba(0,132,173,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(145,223,255,1) 1%,rgba(0,132,173,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(145,223,255,1) 1%,rgba(0,132,173,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(145,223,255,1) 1%,rgba(0,132,173,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(145,223,255,1) 1%,rgba(0,132,173,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91dfff', endColorstr='#0084ad',GradientType=0 ); /* IE6-8 */





}

a.social-button.google{
    background: #d34836; /* Old browsers */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url();
background: -moz-linear-gradient(top,  rgba(211,72,54,1) 0%, rgba(135,14,14,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(211,72,54,1)), color-stop(100%,rgba(135,14,14,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(211,72,54,1) 0%,rgba(135,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(211,72,54,1) 0%,rgba(135,14,14,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(211,72,54,1) 0%,rgba(135,14,14,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(211,72,54,1) 0%,rgba(135,14,14,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d34836', endColorstr='#870e0e',GradientType=0 ); /* IE6-8 */

}


a.social-button .clearfix{
    clear: both;
    width: 100%;
}

